<!-- 设置 -->
<!-- 包含登录/登出组件，还有其他组件 -->
<template>
    <!-- 导航栏 -->
    <ul id="setting-nav">
        <li id="login" :class="{ selected: menu_selected === 'bookmark' }" @click="menu_select('bookmark')">登录/注册</li>
        <li :class="{ selected: menu_selected === 'setting' }" @click="menu_select('setting')">搜索引擎</li>
        <li :class="{ selected: menu_selected === 'other' }" @click="menu_select('history')">个人日志</li>
    </ul>
    <!-- 导航栏事件显示 -->
    <ul id="setting-show">
        <div id="setting-show-login" v-if="menu_selected === 'bookmark'">
            <User />
        </div>
        <div id="setting-show-engine" v-else-if="menu_selected === 'setting'">
            <Engine />
        </div>
        <div v-else-if="menu_selected === 'history'">
            <LoginTime/>
        </div>
    </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import User from './User.vue'
import Engine from './Engine.vue'
// import History from './History.vue'
import LoginTime from './LoginTime.vue'
const menu_selected = ref('bookmark')
function menu_select(val: any) {
    menu_selected.value = val
}
</script>

<style scoped>
@import '../style/setting.css';

</style>
